<template>
  <div>
    <h5><span class="badge bg-success">价格查询</span></h5>
    <form>
      <div class="mb-3">
        <label class="form-label">品类</label>
        <select
          ref="cate"
          class="form-select"
          aria-label="Default select example"
          v-model="getCate"
        >
          <option v-for="c in cate" :key="c" :value="c">
            {{ c }}
          </option>
        </select>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">产地</label>
        <select
          ref="origin"
          class="form-select"
          aria-label="Default select example"
          v-model="getProvince"
        >
          <option v-for="p in province" :key="p" :value="p">
            {{ p }}
          </option>
        </select>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">日期</label>
        <input id="date" class="form-control" type="date" v-model="date" />
      </div>
      <div class="align-center">
        <button class="btn btn-success" v-on:click="query()">查询</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      province: [
        "山东",
        "江苏",
        "安徽",
        "浙江",
        "福建",
        "上海",
        "广东",
        "广西",
        "海南",
        "湖北",
        "湖南",
        "河南",
        "江西",
        "北京",
        "天津",
        "河北",
        "山西",
        "内蒙古",
        "宁夏",
        "新疆",
        "青海",
        "陕西",
        "甘肃",
        "四川",
        "云南",
        "贵州",
        "西藏",
        "重庆 ",
        "辽宁",
        "吉林",
        "黑龙江",
      ],
      cate: ["蔬菜", "水果", "禽畜牧蛋肉", "坚果干果", "食用菌", "粮油作物"],
      getProvince: "",
      getCate: "",
      date: "",
    };
  },
  mounted() {},
  methods: {
    query() {
      if (this.getCate != "" && this.getProvince != "" && this.date != "") {
        this.$router.push({
          path: "/governmentQueryResult",
          query: {
            cate: this.getCate,
            origin: this.getProvince,
            date: this.date,
          },
        });
      } else {
        alert("信息不完整");
      }
    },
  },
};
</script>

<style scoped>
.align-center {
  text-align: center;
}
header {
  background-color: #2c7d72;
}
</style>